<template>
  <div id="components-dropdown-demo-placement" class="flex items-center justify-center">
    <template v-for="(placement, index) in placements" :key="placement">
      <a-dropdown :placement="'bottomRight'" arrow>
        <a-button>{{ placement }}</a-button>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                1st menu item
              </a>
            </a-menu-item>
            <a-menu-item>
              <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
                2nd menu item
              </a>
            </a-menu-item>
            <a-menu-item disabled>
              很长很长的很长很长的很长很长的很长很长
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <br v-if="index === 2" />
    </template>
  </div>
</template>

<script setup>
const placements = ['bottomLeft', 'bottom', 'bottomRight', 'topLeft', 'top', 'topRight']
</script>

<style lang="scss" scoped>
#components-dropdown-demo-placement {
  padding: 200px 0;
  background: #fff;
  .ant-btn {
    margin-right: 8px;
    margin-bottom: 8px;
  }
}
</style>
